<template>
  <div id="app">
    <h1>
      根组件中的元素是一致存在的，当项目中存在这种需求，比如：tabbar，可以放在根组件中。它不会随着路由的切换而消失。
    </h1>
    <nav>
      <!-- router-link: 跳转路由的，最终生成的是a标签 -->
      <router-link :to="{ name: 'home' }">首页</router-link> |
      <router-link :to="{ name: 'about' }">教程</router-link> |
      <router-link to="/course456">网校</router-link> |
      <router-link to="/my111">我的</router-link>
    </nav>
    <!-- <router-view /> 它是vue-router路由提供的路由组件占位符，凡是路由匹配成功的组件，会展示在这里。最终：匹配成功的组件模板会替换router-view，它就不存在了。 -->
    <!-- <router-view /> -->
    <div class="main">
      <div class="app-test">
        <transition :name="aniName">
          <router-view />
        </transition>
      </div>
    </div>
    <el-carousel class="swiper" height="200px" @change="carouselEvent">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "AppView",
  data() {
    return {
      aniName: "push",
    };
  },
  watch: {
    $route(to, from) {
      console.log(from.path, to.path);
      console.log(from.meta.routeLevel, to.meta.routeLevel);
      if (from.meta.routeLevel < to.meta.routeLevel) {
        // 从左往右点，理解为进入
        this.aniName = "push";
      } else if (from.meta.routeLevel > to.meta.routeLevel) {
        // 从右往左点，理解为返回
        this.aniName = "back";
      } else {
        // routeLevel值相等，取消动画
        this.aniName = "";
      }
    },
  },
  methods: {
    carouselEvent(params) {
      switch (params) {
        case 0:
          console.log("第1张");
          break;
        case 1:
          console.log("第2张");
          break;
        case 2:
          console.log("第3张");
          break;
        case 3:
          console.log("第4张");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/**
样式穿透：/deep/ >>> ::v-deep这三种
1. style必须有 scoped 局部作用域样式；
2. 样式使用的类名必须第三方组件内置的类名，不能是自己定义的类名；
style是 scss 样式，使用 ::v-deep
style是 css 样式，使用 /deep/ >>>
*/
.swiper {
  background-color: lightblue;
  /* .small {
    text-align: center;
  } */
}
::v-deep .el-carousel__container {
  border: 1px solid blue;
}

// 没有scoped，表示样式全局生效，一般设置公共样式。
h1 {
  font-size: $font-size;
  font-style: italic;
}
* {
  margin: 0;
  padding: 0;
}
// 组件切换动画步骤：
// 1. 先把所有的路由组件根元素，宽度和高度填充。
// 2. 将 <router-view /> 所代表路由组件都设置绝对定位。
// 3. 设置6个类名，实现切换动画。
// 4. 在页面切换过程中，会出现滚动条，需要将 <router-view /> 所在的父元素，设置宽度同时禁止滚动。
.app-test {
  position: relative;
  height: calc(100vh - 79px);
  width: 100vw;
  overflow: hidden;
  > div {
    position: absolute;
    top: 0;
  }
}
// push动画
.push-enter {
  left: 100vw;
}
.push-enter-active,
.push-leave-active {
  transition: all 0.5s;
}
.push-enter-to,
.push-leave {
  left: 0;
}
.push-leave-to {
  left: -100vw;
}
// back动画
.back-enter {
  left: -100vw;
}
.back-enter-active,
.back-leave-active {
  transition: all 0.5s;
}
.back-enter-to,
.back-leave {
  left: 0;
}
.back-leave-to {
  left: 100vw;
}
.contanier {
  width: 100vw;
  height: calc(100vh - 79px);
  overflow: hidden;
}
</style>
